<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
             var ul = document.getElementsByTagName("ul")[0];
            // 给ul绑定单击响应事件
            //将事件绑定给元素的共同的祖先元素，这样当后代元素的事件都可以触发
             ul.onclick = function(event){
                //  target代表触发事件的对象
                if(event.target.className == "link"){
                    // 如果触发事件的对象是属于link类，则alert
                    alert("我是ul中的超链接");
                }
            }

            var btn = document.getElementById("btn");
            // 给按钮绑定单击相应事件
            btn.onclick = function(){
                // 创建一个新的li
                var li = document.createElement("li");
                // 给li添加内容
                li.innerHTML = "<li><a href='#'' class='link'>新添加的超链接</a></li>";
                // 将li添加到ul中
                ul.appendChild(li);
            }
        }
    </script>
</head>
<body>
    <button id="btn">添加超链接</button>
    <ul>
        <li><a href="#" class="link">超链接1</a></li>
        <li><a href="#" class="link">超链接2</a></li>
        <li><a href="#" class="link">超链接3</a></li>
    </ul>
</body>
</html>